<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { getId } from '@/utils/storage'

const list = ref(getId().data)
console.log(list)
// const list = ref(null)
// onMounted(() => {
//   list.value = getId()
// })
// console.log(list)
const router = useRouter()
defineOptions({
  name: 'particularsPage'
})
const Back = () => {
  router.go(-1)
}
</script>

<template>
  <div>
    <a-page-header
      style="border: 1px solid rgb(235, 237, 240); user-select: none; background-color: #fff"
      @back="Back"
    >
      <template #title>
        <span
          style="
            font-size: 16px;
            font-weight: 400;
            padding-right: 8px;
            border-right: 1px solid rgb(146, 143, 143);
          "
          @click="Back"
          >返回</span
        >
      </template>
      <template #extra>
        <span style="font-size: 16px">黑马程序员</span>
      </template>
      <template #subTitle>
        <span style="font-size: 16px; font-weight: 500; color: #000; height: 100%">告警详情</span>
      </template>
    </a-page-header>
    <div class="content">
      <div>
        <a-form>
          <a-card class="warnInfo">
            <span class="title"><span class="side"></span>告警详情</span>
            <a-row>
              <a-col :span="12" style="padding: 0 16px">
                <a-form-item label="告警时间:" :label-col="{ span: 3 }">
                  {{ list.warningTime }}
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding: 0 16px">
                <a-form-item label="一体杆名称:" :label-col="{ span: 4 }">
                  {{ list.poleName }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12" style="padding: 0 16px">
                <a-form-item label="告警区域:" :label-col="{ span: 3 }">
                  {{ list.areaName }}
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding: 0 16px">
                <a-form-item label="一体杆编号:" :label-col="{ span: 4 }">
                  {{ list.handleStatus }}
                </a-form-item>
              </a-col>
            </a-row>
            <a-row>
              <a-col :span="12" style="padding: 0 16px">
                <a-form-item label="故障类型" :label-col="{ span: 3 }">
                  {{ list.errorType }}
                </a-form-item>
              </a-col>
              <a-col :span="12" style="padding: 0 16px">
                <a-form-item label="处置状态" :label-col="{ span: 3 }">
                  {{ list.handleResult }}
                </a-form-item>
              </a-col>
            </a-row>
          </a-card>

          <div>
            <a-card class="warnInfo">
              <span class="title"><span class="side"></span>告警处理</span>
              <a-row>
                <a-col :span="12" style="padding: 0 16px">
                  <a-form-item label="处理人:" :label-col="{ span: 3 }">
                    {{ list.handleUser }}
                  </a-form-item>
                </a-col>
                <a-col :span="12" style="padding: 0 16px">
                  <a-form-item label="联系方式:" :label-col="{ span: 3 }">
                    {{ list.phonenumber }}
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row>
                <a-col :span="12" style="padding: 0 16px">
                  <a-form-item label="处理结果:" :label-col="{ span: 3 }">
                    {{ list.handleResult }}
                  </a-form-item>
                </a-col>
                <a-col :span="12" style="padding: 0 16px">
                  <a-form-item label="完成时间:" :label-col="{ span: 3 }">
                    {{ list.handleTime }}
                  </a-form-item>
                </a-col>
              </a-row>
            </a-card>
          </div>
        </a-form>
      </div>
    </div>
  </div>
</template>
<style lang="less" scoped>
// body {
//   background-color: #f4f6f8;
// }
:deep(.content) {
  height: 793px;
  background-color: #f4f6f8;
  padding: 20px 130px;
  .warnInfo {
    width: 1250px;
    background-color: #fff;
    margin-bottom: 20px;
    position: relative;
    padding: 60px 65px 24px;
    .title {
      font-size: 14px;
      font-weight: 500;
      position: absolute;
      top: 20px;
      left: 10px;
      .side {
        content: '';
        height: 80%;
        width: 2px;
        background-color: #4770ff;
        position: absolute;
        left: -10px;
        top: 2px;
      }
    }
  }
}
</style>
